<script setup lang="ts">
import { reactive } from "vue";
import { ValidateTool } from "@webxue/common";
import { UserOutlined, LockOutlined, MobileOutlined, SafetyOutlined } from "@ant-design/icons-vue";
import { BaseApi } from "@/apis/base.api";
import { useRoute, useRouter } from "vue-router";
import { useUserStore } from "@/stores/user.store";
import useUser from "@/hooks/useUser";

const router = useRouter();
const route = useRoute();
const sysLoginData = reactive({
  // 登录方式
  loginWay: "loginCode",
  // 获取验证码
  onGetCode() {
    console.log("获取验证码");
  },
  // 登录
  async onLogin() {
    const loginData: any = {};
    if (sysLoginData.loginWay === "loginCode") {
      loginData.loginType = "1";
      loginData.loginCode = loginForm.loginCode;
      loginData.password = loginForm.password;
    }
    let redirectUrl = "/";
    if (route.query._redirect) {
      redirectUrl = decodeURIComponent(route.query._redirect as string);
    }
    const response = await BaseApi.auth.login(loginData);
    if (response.success) {
      useUserStore().setUserTK(response.data);
      await useUser().refresh();
      await router.push(redirectUrl);
    }
  }
});
// 登录表单数据
const loginForm = reactive({
  // 登录账号
  loginCode: "",
  // 登录密码
  password: "",
  // 手机号
  mobile: "",
  // 验证码
  code: "",
  // 记住密码
  remember: false
});
// 自定义校验规则
const validator = {
  mobile(rule: any, value: string) {
    if (!value) return Promise.reject("请输入手机号");
    if (!ValidateTool.isPhone(value)) return Promise.reject("请输入合法的手机号");
    return Promise.resolve();
  }
};
</script>

<template>
  <div class="sys-login pt-32 border-gray-200 w-screen h-screen">
    <div class="mx-auto flex w-[600px] flex-col justify-center items-center bg-white rounded p-4">
      <div class="text-2xl font-bold">WebxAdmin</div>
      <div class="text-sm text-gray-400 mb-5">一款通用的后台管理系统</div>
      <ATabs v-model:activeKey="sysLoginData.loginWay" centered destroyInactiveTabPane>
        <ATabPane key="loginCode" tab="账号密码登录" />
        <ATabPane key="mobileCode" tab="手机号验证码登录" />
      </ATabs>
      <AForm
        class="w-96"
        :model="loginForm"
        :wrapperCol="{ span: 24 }"
        @finish="sysLoginData.onLogin"
      >
        <template v-if="sysLoginData.loginWay === 'loginCode'">
          <AFormItem name="loginCode" :rules="[{ required: true, message: '请输入账号' }]">
            <AInput v-model:value="loginForm.loginCode" placeholder="请输入账号">
              <template #prefix>
                <UserOutlined />
              </template>
            </AInput>
          </AFormItem>
          <AFormItem name="password" :rules="[{ required: true, message: '请输入密码' }]">
            <AInputPassword v-model:value="loginForm.password" placeholder="请输入密码">
              <template #prefix>
                <LockOutlined />
              </template>
            </AInputPassword>
          </AFormItem>
        </template>
        <template v-if="sysLoginData.loginWay === 'mobileCode'">
          <AFormItem name="mobile" :rules="[{ required: true, validator: validator.mobile }]">
            <AInput v-model:value="loginForm.mobile" placeholder="请输入手机号">
              <template #prefix>
                <MobileOutlined />
              </template>
            </AInput>
          </AFormItem>
          <AFormItem name="code" :rules="[{ required: true, message: '请输入验证码' }]">
            <div class="flex gap-4">
              <AInput class="flex-1" v-model:value="loginForm.code" placeholder="请输入验证码">
                <template #prefix>
                  <SafetyOutlined />
                </template>
              </AInput>
              <WebxBtnCode @getCode="sysLoginData.onGetCode" />
            </div>
          </AFormItem>
        </template>
        <AFormItem v-if="sysLoginData.loginWay === 'loginCode'">
          <div class="flex justify-between">
            <AFormItem name="remember" noStyle>
              <ACheckbox v-model:checked="loginForm.remember">记住密码</ACheckbox>
            </AFormItem>
            <span class="text-blue-500 cursor-pointer">忘记密码</span>
          </div>
        </AFormItem>
        <AFormItem>
          <AButton block type="primary" htmlType="submit">登录</AButton>
        </AFormItem>
      </AForm>
    </div>
  </div>
</template>

<style scoped lang="less">
// 去除登录方式切换的下边框
:deep(.ant-tabs-nav:before) {
  display: none;
}
</style>
